<template>
	<fs-page class="PageFeatureSearchMulti">
		<fs-crud ref="crudRef" v-bind="crudBinding">
			<template #cell_url="scope">
				<el-tag size="small">{{ scope.row.url }}</el-tag>
			</template>
			<!-- 注释编号: django-vue3-admin-index442216: -->
			<!-- 注释编号:django-vue3-admin-index39263917:代码开始行-->
			<!--  功能说明:使用导入组件，并且修改api地址为当前对应的api，当前是demo的api="api/AssetModelViewSet/"-->
			<template #actionbar-right>
				<importExcel api="api/DatabaseLinkViewSet/" v-auth="'DatabaseLinkViewSet:Import'">导入</importExcel>
			</template>
			<!--  注释编号:django-vue3-admin-index263917:代码结束行-->
			

			<!-- 注释编号:django-vue3-admin-index34423417:代码开始行-->
			<!-- 功能说明:添加批量删除按钮-->
			<template #pagination-left>
				<el-tooltip content="批量删除">
					<el-button type="danger" round :disabled="selectedRowsCount === 0" @click="handleBatchDelete">批量删除</el-button>
				</el-tooltip>
			</template>
			<!-- 注释编号:django-vue3-admin-index423417:代码结束行-->



			<!-- 注释编号:django-vue3-admin-index37013717:代码开始行-->
			<!-- 功能说明:右下角显示出来已选中的数据-->
			<template #pagination-right>
				
				<el-popover placement="top" :width="400" trigger="click">
					<template #reference>
						<el-button text :type="selectedRowsCount > 0 ? 'primary' : ''">已选中{{ selectedRowsCount }}条数据</el-button>
					</template>
					<el-table :data="selectedRows" size="small" max-height="400" >
						<el-table-column width="150" property="id" label="id" />
						<el-table-column width="150" property="name" label="DB-Link" />
						<el-table-column fixed="right" label="操作" min-width="60">
							<template #default="scope">
								<el-button type="danger" round @click="removeSelectedRows(scope.row)">剔除</el-button>

							</template>
						</el-table-column>
					</el-table>
				</el-popover>
			</template>
			<!-- 注释编号:django-vue3-admin-index013717:代码结束行-->

		</fs-crud>
	</fs-page>
</template>

<script lang="ts">

// 注释编号:django-vue3-admin-index504517:这里要导入computed
import { onMounted, getCurrentInstance, defineComponent, computed} from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import createCrudOptions  from './crud';


// 注释编号: django-vue3-admin-index192316:导入组件
import importExcel from '/@/components/importExcel/index.vue'   


// 注释编号:django-vue3-admin-index324217:代码开始行
// 功能说明:导入多选批量删除需求
import XEUtils from 'xe-utils';
import { BatchDelete } from './api';
import { ElMessage, ElMessageBox } from 'element-plus';
// 注释编号:django-vue3-admin-index324217:代码结束行





export default defineComponent({    //这里配置defineComponent
    name: "DatabaseLinkViewSet",   //把name放在这里进行配置了
	components: {importExcel},  //注释编号: django-vue3-admin-index552416: 注册组件，把importExcel组件放在这里，这样<template></template>中才能正确的引用到组件
    setup() {   //这里配置了setup()

		const instance = getCurrentInstance();

		const context: any = {
			componentName: instance?.type.name
		};


		// 注释编号:django-vue3-admin-index104517:这里要拿到selectedRows
		const { crudBinding, crudRef, crudExpose, resetCrudOptions, selectedRows} = useFs({ createCrudOptions, context});  


		// 注释编号:django-vue3-admin-index034717:选中行的条数
		const selectedRowsCount = computed(() => {
			return selectedRows.value.length;
		});

		// 注释编号:django-vue3-admin-index174717:批量删除
		const handleBatchDelete = async () => {
			await ElMessageBox.confirm(`确定要批量删除这${selectedRows.value.length}条记录吗`, '确认', {
				distinguishCancelAndClose: true,
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				closeOnClickModal: false,
			});
			await BatchDelete(XEUtils.pluck(selectedRows.value, 'id'));
			ElMessage.info('删除成功');
			selectedRows.value = [];
			await crudExpose.doRefresh();
		};


		// 注释编号:django-vue3-admin-index484717:移除已选中的行
		const removeSelectedRows = (row: any) => {
			const tableRef = crudExpose.getBaseTableRef();
			const tableData = crudExpose.getTableData();
			if (XEUtils.pluck(tableData, 'id').includes(row.id)) {
				tableRef.toggleRowSelection(row, false);
			} else {
				selectedRows.value = XEUtils.remove(selectedRows.value, (item: any) => item.id !== row.id);
			}
		};

		// 页面打开后获取列表数据
		onMounted(() => {
			crudExpose.doRefresh();
		});
		return {  
		//增加了return把需要给上面<template>内调用的<fs-crud ref="crudRef" v-bind="crudBinding">
				crudBinding,
				crudRef,

				// 注释编号:django-vue3-admin-index380118:代码开始行
				// 功能说明:这里要把多选批量删除的需求导入给上面的template使用
				selectedRowsCount,
				handleBatchDelete,
				removeSelectedRows,
				selectedRows,
				// 注释编号:django-vue3-admin-index380118:代码结束行

			};
	

    } 	//这里关闭setup()
  });  //关闭defineComponent

</script>